<template>
	<view>
		<!-- <view class="searchBox">
			<view class="searchItem flex align-center">
				<image class="searchIcon" src="/static/image/searchw.png"></image>
				<text>搜索商企</text>
			</view>
		</view> -->
		<view class="bgFill"></view>
		<view class="infoBox"> 
			<view class="pageTitle">{{datas.name}}</view>
			<view style="margin-top: 20upx;">
				<image class="pageicon" src="../app_admin/image/address.png"></image>
				<text class="iconText">{{datas.address}}</text>
			</view>
			<view class="flex align-center justify-between" style="margin-top: 20upx;">
				<view>
					<image class="pageicon" src="/static/image/WB/hot.png"></image>
					<text class="iconText">人气：{{datas.views}}</text>
				</view>
				<view>
					<image  class="pageicon" src="/static/image/WB/shop.png"></image>
					<text class="iconText">商户数：{{datas.mch_num}}</text>
				</view>
			</view>
		</view>
		<view style="height: 20upx;width: 100%;"></view>
		<!-- <shopclass></shopclass> -->
		<block v-for="i in list">
			<nearshop :datas="i"></nearshop>
		</block>
		<view class="hasmore">{{hasmore?'加载中':'没有更多了'}}</view>
	</view>
</template>

<script>
	import {
		post,
		abortPost,
		get,
		getdistance
	} from '@/utils/post.js'
	import nearshop from './components/shop.vue'
	import shopclass from './components/shopClass.vue'
	export default {
		components: {
			nearshop,
			shopclass
		},
		data() {
			return {
				list:[],
				hasmore:true,
				page:1,
				page_size:10,
				datas:''
			};
		},
		onLoad(op){
			this.latitude = op.lat
			this.longitude = op.lng
			this.id = op.id
			this.getList()
			this.getDetail()
		},
		onReachBottom() {
			if (this.hasmore) {
				abortPost()
				this.getList()
			}
		},
		methods: {
			getDetail(){
				var data = {
					id:this.id
				}
				get(this.$api.nearby.circle_detail, data, false, res => {
					this.datas = res.data
				})
			},
			getList() {
				var data = {
					page: this.page,
					latitude: this.latitude,
					longitude: this.longitude,
					limit: this.page_size,
					keyword:this.keyword,
					circle_id:this.id
				}
				get(this.$api.nearby.list, data, false, res => {
					this.page++
					if (res.code == 0) {
						res.data.list.map(item => {
							item.distance = getdistance(item.latitude,item.longitude,this.latitude,this.longitude)
							this.list.push(item)
						})
						this.hasmore = res.data.list.length == this.page_size
					}
				})
			}
		}
	}
</script>

<style scoped>
	.iconText{
		font-size: 24upx;
		color: #888;
		margin-left: 10upx;
	}
	.pageTitle{
		font-size: 30upx;
		font-weight: bold;
	}
	.pageicon{
		width: 34upx;
		height: 34upx;
		vertical-align: middle;
	}
	.infoBox {
		width: 700upx;
		padding: 20upx 40upx;
		margin: -80upx auto 0;
		background: #fff;
		border-radius: 10upx;
		box-shadow: 0 5px 5px #eee;
	}

	.bgFill {
		background-image: linear-gradient(to bottom, #ffbd61, #ffffff);
		width: 100%;
		height: 120upx;
	}

	.searchIcon {
		width: 34upx;
		height: 34upx;
		margin: 0 20upx;

	}

	.searchItem {
		width: 700upx;
		margin: 10upx auto 0;
		background: #ffc680;
		height: 60upx;
		border-radius: 30upx;
		color: #fff;
		font-size: 28upx;
	}

	.searchBox {
		position: fixed;
		padding-bottom: 20upx;
		background-image: linear-gradient(to bottom, #ff8d5a, #ffbd61);
		left: 0;
		width: 100%;
		z-index: 100;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
	}

	page {
		background: #fff;
	}
</style>
